<template>
    <codemirror v-model="code" :options="options" ref="mycode"></codemirror>
</template>

<script>
import { codemirror } from "vue-codemirror";
import "codemirror/lib/codemirror.css";
// 主题
import "codemirror/theme/base16-dark.css"; // 引入主题样式，根据设置的theme的主题引入
// import 'codemirror/addon/selection/active-line' //光标行背景高亮，配置里面也需要styleActiveLine设置为true
// import 'codemirror/keymap/sublime' //sublime编辑器效果
// import 'codemirror/mode/css/css'
// html代码高亮
import "codemirror/mode/htmlmixed/htmlmixed.js";
// 语言模式
import 'codemirror/mode/javascript/javascript.js'
export default {
    props: {
        mode: {
            type: String,
            default: 'javascript'
        }
    },
    data() {
        return {
            code: '',
            options: {
                line: true,
                theme: "base16-dark", // 主题
                tabSize: 4, // 制表符的宽度
                indentUnit: 2, // 一个块应该缩进多少个空格（无论这在编辑语言中意味着什么）。默认值为 2。
                firstLineNumber: 1, // 从哪个数字开始计算行数。默认值为 1。
                readOnly: false, // 只读
                autorefresh: true,
                smartIndent: true, // 上下文缩进
                lineNumbers: true, // 是否显示行号
                styleActiveLine: true, // 高亮选中行
                viewportMargin: Infinity, //处理高度自适应时搭配使用
                showCursorWhenSelecting: true, // 当选择处于活动状态时是否应绘制游标
                mode: this.mode
            },
        };
    },
    components: {
        codemirror
    },
    computed: {
        codemirror() {
            return this.$refs.mycode.codemirror
        }
    },
    methods: {
        getData() {
            // console.log(this.$refs.mycode.codemirror.getValue());
            return this.code;
        },
        setData(code) {
            this.code = code;
        }
    }
}
</script>

<style lang="scss" scoped>
.block-event {
    height: 100%;
}
</style>